<!DOCTYPE html>
<html>
<head>
	<title> 4-8 动态组件与v-once指令</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<div id='root'>
		<!-- <one v-if="type === 'one'"></one>
		<two v-if="type === 'two'"></two> -->
		
		<!-- 使用动态组件标签component,使用is绑定一个数据,它会根据is绑定的数据不同渲染
			 不同的组件,但每次切换时,vue底层会进行频繁的创建、销毁组件,会耗费性能;所以
			 使用v-once指令提高性能,它会将所在组件加载到内存中,当切换时就不用频繁切换了-->
		<component v-bind:is='type'></component>
		<button v-on:click='changeClick'>change</button>
	</div>

	<script type="text/javascript">
		Vue.component('one',{
			//template:"<div>child-one</div>"
			template:"<div v-once>child-one</div>"
		})

		Vue.component('two',{
			//template:"<div>child-two</div>"
			template:"<div v-once>child-two</div>"
		})

		var vm = new Vue({
			el:"#root",
			data:{
				type:'one'
			},
			methods:{
				changeClick:function(){
					this.type = this.type === 'one' ? 'two' : 'one'
				}
			}
		})
	</script>
</body>
</html>